<template>
  <el-popover v-model="visible" placement="left" width="400" trigger="click">
    <el-row class="popover--reply">正在回复：{{ item.user.name }}</el-row>
    <Comment :id="item.id" :add-comment="reply" />
    <el-button slot="reference" type="text">回复</el-button>
  </el-popover>
</template>

<script>
import Comment from './Comment'
export default {
  components: { Comment },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    addComment: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    reply(a, b) {
      this.visible = false
      this.addComment(a, b)
    }
  }
}
</script>

<style lang="scss" scoped>
.popover--reply {
  margin-bottom: 10px;
}
button {
  padding: 0;
}
</style>
